import React, {Component} from 'react'
import {View, TouchableOpacity, Text, Platform} from 'react-native'
import {MaterialIcons, Ionicons} from '@expo/vector-icons'
import TipLayer from '../TipLayer'
import {fetchLongRentList, fetchShortRentList, fetchMeetingRoomList, fetchSiteList, fetchLogo} from '../../utils/api'
import {TIP_DURATION} from '../../utils/configuration'
import {loadLongRentList, loadMeetingRoomList, loadShortRentList, loadSiteList} from '../../actions'
import {connect} from 'react-redux'
class EntryButton extends Component {
    constructor() {
        super()
    }
    state = {
        showLayer: false,
        loaddingData: false,
        dataMsg: null,
        loaddingDataMsg: '加载中...'
    }
    showLayerHandle() {
        this.setState({showLayer: true, dataMsg: '暂无数据'})
        this.timer = setTimeout(function () {
            this.setState({showLayer: false, dataMsg: null})
        }.bind(this), TIP_DURATION)
    }
    pressHandler() {
        const {name, dispatch} = this.props
        const {longRent, shortRent, meetingRoom, site} = this.props
        switch (name) {
            case 'long-rent':
                if (longRent.list === null || longRent.list.length === 0) {
                    this.showLayerHandle()
                    dispatch(loadLongRentList({page: 1}))
                } else {
                    console.log('跳转长租列表');
                }
                break;
            case 'short-rent':
                if (shortRent.list === null || shortRent.list.length === 0) {
                    this.showLayerHandle()
                    dispatch(loadShortRentList({page: 1}))
                } else {
                    console.log('跳转短租列表');
                }
                break;
            case 'meeting-room':
                if (meetingRoom.list === null || meetingRoom.list.length === 0) {
                    this.showLayerHandle()
                    dispatch(loadMeetingRoomList({page: 1}))
                } else {
                    console.log('跳转会议室列表');
                }
                break;
            case 'site':
                if (site.list === null || site.list.length === 0) {
                    this.showLayerHandle()
                    dispatch(loadSiteList({page: 1}))
                } else {
                    console.log('跳转场地列表');
                }
                break;
            default:
                if (longRent.list === null || longRent.list.length === 0) {
                    this.showLayerHandle()
                    dispatch(loadLongRentList({page: 1}))
                } else {
                    console.log('跳转长租列表');
                }
                console.log('跳转其他列表');
                break;
        }
    }
    componentWillUnmount() {
        this.timer && clearTimeout(this.timer)
    }
    render() {
        const {showLayer, loaddingDataMsg, dataMsg, loaddingData} = this.state
        const {
            title = 'default',
            name = null
        } = this.props
        let icon = null
        switch (name) {
            case 'long-rent':
                Platform.OS === 'ios'
                    ? icon = <Ionicons size={30} name='ios-desktop'/>
                    : icon = <MaterialIcons size={30} name='tv'/>
                break
            case 'short-rent':
                Platform.OS === 'ios'
                    ? icon = <Ionicons size={30} name='ios-briefcase'/>
                    : icon = <MaterialIcons size={30} name='phone'/>
                break
            case 'meeting-room':
                Platform.OS === 'ios'
                    ? icon = <Ionicons size={30} name='ios-call'/>
                    : icon = <MaterialIcons size={30} name='dashboard'/>
                break
            case 'site':
                Platform.OS === 'ios'
                    ? icon = <Ionicons size={30} name='ios-pin'/>
                    : icon = <MaterialIcons size={30} name='place'/>
                break
            default:
                Platform.OS === 'ios'
                    ? icon = <Ionicons size={30} name='ios-desktop'/>
                    : icon = <MaterialIcons size={30} name='tv'/>
                break
        }



        return <View>
            <TouchableOpacity onPress={() => this.pressHandler()}>
                <View
                    style={{
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <View style={{
                        marginBottom: 10
                    }}>
                        {icon}
                    </View>
                    <Text>{title}</Text>
                    {showLayer === true
                        ? <TipLayer
                                type={loaddingData === true
                                ? 'loadding'
                                : null}
                                msg={loaddingData === true
                                ? loaddingDataMsg
                                : dataMsg}/>
                        : null
}
                </View>
            </TouchableOpacity>
        </View>
    }

}
mapStateToProps = (state) => ({longRent: state.longRent, shortRent: state.shortRent, meetingRoom: state.meetingRoom, site: state.site})

export default connect(mapStateToProps)(EntryButton)